<template>
  <div>
      <van-tabbar active-color="#884E22" inactive-color="#666" :route='true'>
      <van-tabbar-item to="/home">
        <span>首页</span>
        <template #icon="props">
          <van-icon class="iconfont" class-prefix="icon" name='tubiao--copy
'></van-icon>
        </template>
      </van-tabbar-item>
      <van-tabbar-item to='/cates'>
        <span>分类</span>
        <template #icon="props">
          <van-icon class="iconfont" class-prefix="icon" name='leimupinleifenleileibie
'></van-icon>
        </template>
      </van-tabbar-item>
      <van-tabbar-item to='/cart'>
        <span>购物车</span>
        <template #icon="props">
          <van-icon
          class="iconfont"
          class-prefix="icon"
          name='gouwu'
          :badge="items.length?items.length:''"
          ></van-icon>
        </template>
      </van-tabbar-item>
      <van-tabbar-item to='mine'>
        <span>我的</span>
        <template #icon="props">
          <van-icon class="iconfont" class-prefix="icon" name='lianxiaolianmanyi-3
'></van-icon>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      items: (state) => state.cart.carts.items
    })
  }
}
</script>

<style lang="scss" scoped>

</style>
